<template>
  <div class="parkPictureWrap" ref="parkPictureWrap">
    <div class="pageTableInner">
      <div class="infoSearchWrap">
        <div class="infoSearchOne">
          <el-row :gutter="20">
            <el-col :span="7">
              <div class="searchWrap">
                <span class="searchFont">行政区域:</span>
                <span class="searchInputFont" style="width: 38%;">
                  <el-select :disabled="$store.state.userInfo.regionId?true:false" v-model="searchInfo.district"
                             @change="changeDistrict(searchInfo.district)" size="mini"
                             :clearable="false" placeholder="行政区">
                    <el-option
                      v-for="item in $store.state.districtData"
                      :key="item.id"
                      :label="item.regionName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </span>
                <span class="searchInputFont" style="width: 38%;">
                    <el-select v-model="searchInfo.street" @change="checkstreet" size="mini" clearable placeholder="街道">
                      <el-option
                        v-for="item in streetData"
                        :key="item.id"
                        :label="item.regionName"
                        :value="item.id">
                      </el-option>
                    </el-select>
                 </span>
              </div>
            </el-col>
            <el-col :span="7">
              <div class="searchWrap">
                <span class="searchFont">站点类型:</span>
                <span class="searchInputFont">
                   <el-radio-group size="mini" v-model="searchInfo.areaType" @change="selectGovAreaMap()">
                    <el-radio-button v-for="(item,index) in typeList" :key="index" :label="item.value">{{item.label}}</el-radio-button>
                  </el-radio-group>
                </span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">日期:</span>
                <span class="searchInputFont">
                   <el-date-picker
                     v-model="searchInfo.statisTime"
                     @change="selectGovAreaMap"
                     style="width: 100%;"
                     align="right"
                     type="date"
                     size="mini"
                     value-format="yyyy-MM-dd"
                     placeholder="选择日期"
                     :picker-options="pickerOptions1">
                  </el-date-picker>

                </span>
              </div>
            </el-col>
            <div style="float: right;margin-right: 10px;">
              <el-button type="primary" size="mini" @click="selectGovAreaMap()">查询</el-button>
            </div>
          </el-row>
        </div>
      </div>
      <div class="mapContentWrap">
        <mapBicycletest
          :areaInfo="areaInfo"
          :district="searchInfo.district"
          ref="mapFun"
          :companyInfos="companyInfos"
          @changeCompany="changeCompany"
        ></mapBicycletest>

      </div>
    </div>
  </div>
</template>

<script>
  import mapBicycletest from "./mapRack.vue"
  export default {
    props: [],
    data(){
      return {
        companyInfos: [{enterpriseNo: null, enterpriseName: "全部", count: 526895}, {
          enterpriseNo: '075501',
          enterpriseName: "摩拜",
          count: 285689
        }, {enterpriseNo: '075502', enterpriseName: "ofo", count: 235684}],
        searchInfo: {
          areaType: "",
          district: this.$store.state.userInfo.regionId?this.$store.state.userInfo.regionId:2,
          street: "",
          enterpriseNo: "",
          areaStatus: 0,
          "statisTime": ""
        },
        pickerOptions1: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        streetData: [],
        typeList: [
          {
            value: '',
            label: '全部'
          },
          {
            value: '0',
            label: '地铁站点'
          },
          {
            value: '1',
            label: '公交站点'
          }],
        areaInfo: []
      }
    },
    components: {

      mapBicycletest
    },
    created(){
      this.searchInfo.statisTime = this.dtime().format('YYYY-MM-DD')
//      获取首次数据
      this.selectGovAreaMap()
      setTimeout(() => {
        if (this.$store.state.userInfo.regionId) {this.changeDistrict(this.searchInfo.district)}
      }, 500)
    },
    destroyed(){

    },
    methods: {
      changeCompany(enterpriseNo){
        this.searchInfo.enterpriseNo=enterpriseNo
        this.selectGovAreaMap()
      },
      //改变行政区 获取街道
      changeDistrict(district){
        this.selectGovAreaMap()
        this.searchInfo.street = ""
        if (!district) {
          this.streetData = []
          return
        }
        this.axios.post(process.env.API_HOST + '/common/selectRegion', {parentId: district})
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.streetData = result.result
            }
          })

        //定到区域
        this.$store.state.districtData.forEach(item => {
          if (item.id == district && item.regionPoints) {
            setTimeout(() => {
              this.$refs.mapFun.getBoundary(JSON.parse(item.regionPoints))
            }, 200)
          }
        })
      },
      //改变街道
      checkstreet(){
        this.selectGovAreaMap()
        if (!this.searchInfo.street) {
          this.changeDistrict(this.searchInfo.district)
        }
        this.streetData.forEach(item => {
          if (item.id == this.searchInfo.street && item.regionPoints) {
            setTimeout(() => {
              this.$refs.mapFun.getBoundary(JSON.parse(item.regionPoints))
            }, 200)
          }
        })
      },
      selectGovAreaMap(){
        this.axios.post(process.env.API_HOST + `/dataAnalysis/busstation`, {
          "beginTime": this.searchInfo.statisTime,
          "endTime": this.searchInfo.statisTime,
          "stationName": "",
          "stationType": this.searchInfo.areaType,
          "parentId": this.searchInfo.district,
          "regionId": this.searchInfo.street,
          "comId": this.searchInfo.enterpriseNo
        })
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              if (result.result.length > 0) {
                if(result.result.length>3000){
                  this.areaInfo = this.sliceArr(result.result,2000)
                }else {
                  this.areaInfo=[result.result]
                }
                setTimeout(()=>{
                  this.$refs.mapFun.addMarkes(this.areaInfo)
                },300)
              }
            }
          })
      },
      sliceArr(array, size) {
        var result = [];
        for (var x = 0; x < Math.ceil(array.length / size); x++) {
          var start = x * size;
          var end = start + size;
          result.push(array.slice(start, end));
        }
        return result;
      }
    }
  }
</script>


<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .parkPictureWrap
    page()
    .mapContentWrap
      position absolute;
      left 0px;
      right 0px
      bottom 0px
      top 78px
      padding: 10px;
      box-sizing: border-box;
      border-radius: 5px;
      background-color: white;
</style>
